<template>
    <div class="form-item-images">
        <section>
            <div class="original-images">
                <div v-for="(item, index) in imagesArrays || []" :key="index" class="images-item">
                    <el-image :preview-src-list="imagesArrays.map((em) => em['fileUrl'])" class="img" :src="item['fileUrl']" />
                    <span v-if="!disabled" @click="cancelItem(index)">×</span>
                </div>
            </div>
            <div v-if="imagesArrays.length < limit && !disabled" class="add-images" @click="uploadImages">
                <span>+</span>
            </div>
        </section>
        <footer>
            {{ msg }}
        </footer>
    </div>
</template>

<script>
import Component, { mixins } from 'vue-class-component';
import Vue from 'vue';
import { Prop, Watch } from 'vue-property-decorator';
import messageCarrier from './index';
import imgUpload from './images-import-popup';
@Component({
    name: 'image-upload-form-item',
    components: {
        imgUpload: () => import('./images-import-popup')
    }
})
export default class App extends Vue {
    @Prop({ required: true, default: () => [] }) imagesArrays;
    @Prop({ required: true }) formData;
    @Prop({ required: true }) disabled;
    @Prop({ required: true }) limit;
    @Prop({ required: true }) msg;
    @Prop({ required: false, default: 'channelId' }) keyFiled;
    @Prop() parameters;
    @Watch('imagesArrays', { immediate: true })
    onImagesArrays(value) {
        if (!Array.isArray(value)) {
            this.$emit('update:imagesArrays', []);
        }
    }
    uploadImages() {
        messageCarrier(imgUpload, {}, (fileList) => {
            this.imagesArrays.push.apply(
                this.imagesArrays,
                fileList.map((em, index) => {
                    return {
                        [this.keyFiled]: this.formData.id,
                        ...em.response.data,
                        orderNumber: index,
                        ...this.parameters
                    };
                })
            );
            this.$emit('update:imagesArrays', this.imagesArrays);
            return true;
        });
    }
    cancelItem(index) {
        this.imagesArrays.splice(index, 1);
        this.$emit('update:imagesArrays', this.imagesArrays);
    }
}
</script>

<style scoped lang="scss">
.form-item-images {
    section {
        display: flex;
        .original-images {
            display: flex;
            .images-item {
                border: 1px solid #d1c9c3;
                display: inline-block;
                width: 44px;
                height: 44px;
                margin-right: 6px;
                position: relative;
                .img {
                    width: 100%;
                    height: 100%;
                }
                span {
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    display: inline-block;
                    right: -6px;
                    top: -6px;
                    text-align: center;
                    line-height: 16px;
                    background: rgba(0, 0, 0, 0.4);
                    color: white;
                    cursor: pointer;
                }
            }
        }
        .add-images {
            display: inline-block;
            width: 44px;
            height: 44px;
            border: 1px #bebebe solid;
            line-height: 44px;
            text-align: center;
            cursor: pointer;
            span {
                font-weight: lighter;
                font-size: 30px;
                color: #8b8b8b;
            }
        }
    }
    footer {
        margin-top: 10px;
        color: #5d5d5d;
        width: 54%;
        font-size: 12px;
        line-height: 16px;
    }
}
</style>
